<template>
	<view class="container">
		
		<view class="seas-list">
			<view class="disf">
				<image :src="result.user_img" class="user-heaeers"></image>
				<view class="ml10">
					<view class="f34 mt5">{{result.user_name}}</view>
					<view class="colccc f28 mt5">{{result.add_time_str}}发布 </view>
				</view>
			</view>
			<view class="p20 f34">{{result.content}}</view>
			<view v-if="result.image"><image :src="result.image" @click="previewImage" :data-image="result.image" mode="heightFix"></image></view>
			<view class="disfr-lr mt30 mb30">
				<view @click="setLike" :data-drift_bottle_id="result.id" class="colccc f30">
					<u-icon name="thumb-up" size="40"></u-icon><text class="ml10">{{result.like_num}}</text>
				</view>
				<view @click="showInput" class="colccc f30">
					<u-icon name="edit-pen" size="40"></u-icon><text class="ml10">{{result.comment_num}}</text>
				</view> 
			</view>
			<view class="bottom-border"></view>
		</view>
		
		<view v-for="(item,index) in list" :key="item.id" class="reply-list pb20">
			<view class="disfr-lr">
				<view class="disfr-lr">
					<view class="mr10">
						<image :src="item.head_pic" style="width: 100rpx;height: 100rpx;flex-shrink: 0;border-radius: 50%;"></image>
					</view>
					<view style="width:580rpx">
						<view class="disfr-lr">
							<view class="pr f32 col999" style="top:5rpx;">{{item.nickname}}</view>
							<view @click="setLike2" :data-drift_bottle_id="result.id" :data-index="index" class="colccc">
								<u-icon name="thumb-up" size="40"></u-icon><text class="ml10">{{item.like_num}}</text>
							</view>
						</view>
						<view class="mt10 f32 col666">{{item.content}}</view>
						<view class="mt10 colccc">{{item.add_time}}
						   <text @click="showInput2" :data-drift_bottle_id="result.id" :data-comment_id="item.id" :data-answer_id="item.user_id" class="ml20">回复</text>
						</view>
						
						<view v-for="(item2,index2) in item.list" :key="item2.id" :class="'reply-list2 mt20 '+(item2.is_hide ? 'hide' : '')">
							
							<view class="disfr-lr">
								<view class="disf">
									<image :src="item2.user_head_pic" class="pr"
									style="width: 60rpx;height: 60rpx;flex-shrink: 0;top:-5rpx;border-radius: 50%;"></image>
									<view class="col999 ml10">{{item2.user_nickname}}</view>
								</view>
								<view @click="setLike3" :data-drift_bottle_id="result.id" :data-index="index" :data-index2="index2" class="colccc">
									<u-icon name="thumb-up" size="40"></u-icon><text class="ml10">{{item2.like_num}}</text>
								</view>
							</view>
							<view class="pl70 f30 pr" style="top:-15rpx">{{item2.content}}</view>
							<view class="pl70 pr col999 f28 pr" style="top:-15rpx">{{item2.add_time}}</view>
						</view>
                        
						<view v-if="!item.all" @click="showAll" :data-index="index" class="pl60 f30 mt20" style="color:#2979ff">全部显示({{item.re_count}})</view>
					</view>
				</view>
			</view>
		</view>
		
		<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
		<loading :loading="not_load"/><!--加载状态-->
		
		<view style="height: 30rpx;"></view>
		<!--评论-->
		<u-popup v-model="showcomment" mode="bottom" width="100%" height="140rpx">
			<view class="disf mt20" style="padding: 10rpx 30rpx 30rpx;">
				<input type="text" v-model="inputContent" style="width: 560rpx;border-radius: 20px;background:#f4f4f4;height: 80rpx;text-indent: 30rpx;" placeholder="输入评论内容~~~"/>
				<view @click="submitComment" class="custom-min-button ml10" style="height: 70rpx;width: 120rpx;line-height: 70rpx;font-size:32rpx;text-align: center;border-radius: 6px;">提交</view>
			</view>
		</u-popup>
		
		<!--评论回复-->
		<u-popup v-model="showcomment2" mode="bottom" width="100%" height="140rpx">
			<view class="disf mt20" style="padding: 10rpx 30rpx 30rpx;">
				<input type="text" v-model="inputContent2" style="width: 560rpx;border-radius: 20px;background:#f4f4f4;height: 80rpx;text-indent: 30rpx;" placeholder="输入评论内容~~~"/>
				<view @click="submitComment2" class="custom-min-button ml10" style="height: 70rpx;width: 120rpx;line-height: 70rpx;font-size:32rpx;text-align: center;border-radius: 6px;">提交</view>
			</view>
		</u-popup>
	
	</view>
</template>

<script setup>
import { onLoad, onShow , onReachBottom ,onPullDownRefresh} from '@dcloudio/uni-app';
import { ref } from 'vue';
//页面加载时
const not_load=ref(false);
const next_page=ref('');
const page_load=ref(false);
const param=ref({});
const result=ref({});
const list=ref([]);//评论列表
onLoad(async (options)=>{
	param.value=options;
	loadPage(param.value,false);
	getComment(param.value,false);
});
//页面显示时执行
onShow(()=>{

});

const loadPage= async (options,isPage)=>{
	let ret = await uni.$get('/appapi-driftbottle-highseasdesc',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	result.value=ret.data;
	//console.log(result.value);
};
const getComment=async(options,isPage)=>{
	let ret = await uni.$get('/appapi-driftbottle-getcomments',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	not_load.value=true;
	next_page.value=ret.data.next_page;
	if(isPage) list.value=[...list.value,...ret.data.list];
	else list.value=ret.data.list;
	//console.log(list.value);
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
const goPage=(e)=>{
	uni.$utils.dataSetPage(e);
};
onPullDownRefresh(()=>{
	//console.log('onPullDownRefresh');
	//not_load.value=false;
	setTimeout(()=>{
		getComment(param.value,false);
		uni.stopPullDownRefresh();
	}, 1000);
});
//上拉触底加载分页
onReachBottom(()=>{
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  getComment(next_page.value, true); 
	},2000);
});
// 私聊用户
const fishUser=async(e)=>{
	
};
//评论
const showcomment=ref(false);
const inputContent=ref('');
const showInput=(e)=>{
	showcomment.value=true;
};
//提交评论
const filter=ref([
	'微信',
	'威信',
	'V信',
	'QQ'
]);
const submitComment=async()=>{
	if(!inputContent.value){
		uni.$utils.showToast('评论内容必填');
		return;
	}
	inputContent.value=uni.$utils.clearSpace(inputContent.value);
	if(!inputContent.value){
		uni.$utils.showToast('评论内容必填');
		return;
	}
	if(!not_load.value) return;
	let options={
		drift_bottle_id:result.value.id,
		author_id:result.value.user_id,
		content:inputContent.value
	};
	not_load.value=false;
	let ret = await uni.$post('/appapi-driftbottle-setcomment',{},options);
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.$utils.showToast('评论成功');
	showcomment.value=false;
	result.value.comment_num+=1;
	getComment(param.value,false);
};
//回复评论
const showcomment2=ref(false);
const inputContent2=ref('');
const comtData=ref({});
const showInput2=(e)=>{
	showcomment2.value=true;
	comtData.value.drift_bottle_id=e.currentTarget.dataset.drift_bottle_id;
	comtData.value.comment_id=e.currentTarget.dataset.comment_id;
	comtData.value.answer_id=e.currentTarget.dataset.answer_id;
};
const submitComment2=async()=>{
	if(!inputContent2.value){
		uni.$utils.showToast('回复内容必填');
		return;
	}
	inputContent2.value=uni.$utils.clearSpace(inputContent2.value);
	if(!inputContent2.value){
		uni.$utils.showToast('回复内容必填');
		return;
	}
	if(!not_load.value) return;
	comtData.value.content=inputContent2.value;
	//console.log(comtData.value);return;
	not_load.value=false;
	let ret = await uni.$post('/appapi-driftbottle-setcomment2',{},comtData.value);
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.$utils.showToast('评论成功');
	showcomment2.value=false;
	result.value.comment_num+=1;
	getComment(param.value,false);
};
//显示全部回复
const showAll=(e)=>{
	let index=e.currentTarget.dataset.index;
	list.value[index].all=true;
	for(let i in list.value[index].list){
		list.value[index].list[i].is_hide=false;
	}
};
//点赞 
const isLike=ref(false);
const setLike=async(e)=>{
	if(isLike.value) return;
	isLike.value=true;
	let drift_bottle_id=e.currentTarget.dataset.drift_bottle_id;
	let ret = await uni.$get('/appapi-driftbottle-setlike',{drift_bottle_id:drift_bottle_id});
	isLike.value=false;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	result.value.like_num+=1;
};
//点赞 
const isLike2=ref(false);
const setLike2=async(e)=>{
	if(isLike2.value) return;
	isLike2.value=true;
	let drift_bottle_id=e.currentTarget.dataset.drift_bottle_id;
	let index=e.currentTarget.dataset.index;
	let comment_id=list.value[index].id;
	let ret = await uni.$get('/appapi-driftbottle-setlike2',{drift_bottle_id:drift_bottle_id,comment_id:comment_id});
	console.log(ret);
	isLike2.value=false;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	result.value.like_num+=1;
	list.value[index].like_num+=1;
};
//点赞 
const isLike3=ref(false);
const setLike3=async(e)=>{
	if(isLike3.value) return;
	isLike3.value=true;
	let drift_bottle_id=e.currentTarget.dataset.drift_bottle_id;
	let index=e.currentTarget.dataset.index;
	let index2=e.currentTarget.dataset.index2;
	let comment_id=list.value[index].id;
	let comment_ext_id=list.value[index]['list'][index2].id;
	let ret = await uni.$get('/appapi-driftbottle-setlike3',{drift_bottle_id:drift_bottle_id,comment_id:comment_id,comment_ext_id:comment_ext_id});
	//console.log(ret);
	isLike3.value=false;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	result.value.like_num+=1;
	list.value[index]['list'][index2].like_num+=1;
};
// 查看图片
const previewImage = (e)=> {
	let image=e.currentTarget.dataset.image;;
    uni.previewImage({
       current: image, 
       urls: [image] 
   })
};
</script>

<style lang="scss">
	page{background: #fff;}
	.seas-list{
		width: 695rpx;
		min-height: 200rpx;
		margin: 20rpx 30rpx 0 30rpx;
	}
	.bottom-border{
		height: 5rpx;
		background: #f4f4f4;
		width: 100%;
	}
	.user-heaeers{
		width: 110rpx;
		height: 110rpx;
		flex-shrink: 0;
		border-radius: 50%;
		margin-right: 5rpx;
	}
	.reply-list{
		width: 695rpx;
		padding: 30rpx;
	}
</style>
